<!--功能定义-->
<template>
  <div class="func-define">
    <div class="header">
      <div class="func-tabs">
        <div class="pane" :class="{ 'active': activeName === 'property' }" @click="handleClick('property')">属性定义</div>
        <div class="pane" :class="{ 'active': activeName === 'event' }" @click="handleClick('event')">事件定义</div>
        <div class="pane" :class="{ 'active': activeName === 'action' }" @click="handleClick('action')">动作定义</div>
      </div>
      <el-tooltip v-if="developStatus == 1" content="产品已发布，信息不可修改，如需修改，请返回开发状态" placement="top">
        <div class="disbled">
          <el-button
            type="add"
            icon="el-icon-plus"
            :disabled="developStatus == 1 || rolesCode === 'SALE'"
            size="14"
            @click="addFunc">
            添加</el-button>
        </div>
      </el-tooltip>
      <el-button
        v-else
        type="add"
        icon="el-icon-plus"
        :disabled="isSwitchDisabled"
        size="14"
        @click="addFunc">添加</el-button>
    </div>
    <!--物模型表格-->
    <physicalModelTable ref="modelRef" :active-name="activeName" @custom-event="handleEvent"></physicalModelTable>
    <!--添加弹窗-->
    <addDialog ref="addDialog" :active-name="activeName"></addDialog>
    <!--查看属性-->
    <viewProperties ref="propertiesDialog"></viewProperties>
    <!--高级功能-->
    <div class="advanced">高级功能</div>
    <el-table
      v-loading="advancedLoading"
      :data="advancedTableData"
      style="width: 100%;margin-top: 20px;"
      :header-cell-style="{ background: '#F5F6F7' }"
      size="medium">
      <el-table-column prop="name" label="功能名称">
        <template slot-scope="scope">
          {{ scope.row.name || "-" }}
        </template>
      </el-table-column>
      <el-table-column prop="chargeType" label="收费方式">
        <template slot-scope="scope">
          {{ scope.row.chargeType ? '收费' : '免费' || "-" }}
        </template>
      </el-table-column>
      <el-table-column prop="description" label="功能描述">
        <template slot-scope="scope">
          {{ scope.row.description || "-" }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.enabled"
            :disabled="isSwitchDisabled"
            active-color="#275FE8"
            @change="handleSwitch(scope.row)"
          >
          </el-switch>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import physicalModelTable from './components/physicalModel/table.vue'
import addDialog from './components/physicalModel/addDialog.vue'
import viewProperties from './components/physicalModel/viewProperties.vue'
import { mapGetters } from "vuex"
import { advancedFunc, updateAdvancedFunc } from "@/api/product/product-details"
export default {
  name: 'functionDefine',
  components: { physicalModelTable, addDialog, viewProperties },
  data() {
    return {
      activeName: 'property', // property 属性定义  event 事件定义  action 动作定义
      developStatus: "", // 开发状态
      detaledFunData: [], // 删除后的功能列表数据
      selectedFuncData: [], // 已选功能数据
      advancedTableData: [], // 高级功能数据
      switchValue: true, // 开关状态
      advancedLoading: false // 高级功能加载状态
    }
  },
  computed: {
    ...mapGetters(["rolesCode"]), 
    isSwitchDisabled() {
      return this.developStatus === '1' || this.rolesCode === 'SALE'
    }
  },
  created() {
    this.developStatus = this.$route.query.developStatus
    this.queryAdvancedFunc()
  },
  methods: {
    // 切换物模型 property 属性定义  event 事件定义  action 动作定义
    handleClick(key) {
      this.activeName = key || this.activeName
      // 调用子组件物模型的列表方法
      this.$refs.modelRef.queryFuncList()
    },
    // 添加功能弹窗
    addFunc() {
      // 在父组件的方法中调用子组件的显示对话框方法
      this.$refs.addDialog.getAddFuncList()
      this.$refs.addDialog.dialogVisible = true
    },
    handleEvent(propertyIds) {
      this.$refs.propertiesDialog.queryProperties(propertyIds)
      this.$refs.propertiesDialog.viewPropertiesVisible = true
    },
    // 高级功能列表
    queryAdvancedFunc() {
      this.advancedLoading = true
      advancedFunc(this.$route.query.productId)
        .then((res) => {
          this.advancedTableData = res.data.data
        })
        .catch((err) => {
          this.$message.error(err.message)
        }).finally(() => {
          this.advancedLoading = false
        })
    },
    // 开关事件
    handleSwitch(row) {
      const params = {
        productId: this.$route.query.productId,
        code: row.code,
        enabled: row.enabled
      }
      // 处理开关事件
      updateAdvancedFunc(params)
        .then((res) => {
          this.queryAdvancedFunc()
        })
        .catch((err) => {
          this.$message.error(err.message)
        })
    },
    // 高级功能列表
    updateAdvancedFunc() {
      updateAdvancedFunc()
        .then((res) => {
          this.queryAdvancedFunc()
        })
        .catch((err) => {
          this.$message.error(err.message)
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;

  .func-tabs {
    display: flex;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;

    .pane {
      margin-right: 48px;
      color: #6D7075;
    }

    .active {
      color: #275FE8;
    }
  }
}

.advanced {
  margin: 30px 0 8px 0;
  font-weight: 600;
}
</style>
